<template>
    <div class="wrap">
        <div class="card">
            <h1 style="margin-bottom: 100px">重置密码</h1>
            <input v-model="updateForm.email" placeholder="请输入邮箱"/>
            <input type="password" v-model="updateForm.newPassword" placeholder="请输入新密码"/>
            <input type="password" v-model="updateForm.checkPassword" placeholder="请确认新密码"/>
            <div class="check">
                <input v-model="updateForm.checkCode" placeholder="验证码"/>
                <el-button size="mini" v-show="CodeCheck.canGet" @click="getCheckCode">
                    {{CodeCheck.checkButtonContent}}
                </el-button>
                <el-button size="mini" v-show="!CodeCheck.canGet" disabled>
                    {{CodeCheck.checkButtonContent}}
                </el-button>
            </div>
            <el-button type="primary" @click="updatePassword">提交</el-button>
        </div>
    </div>
</template>

<script>
    import {getCheckCode, updatePassword} from "@/utils/apis/loginAndRegister";

    export default {
        name: "ForgetPasswd",
        data() {
            return {
                updateForm: {
                    email: '',
                    newPassword: '',
                    checkPassword: '',
                    checkCode: ''
                },
                CodeCheck: {
                    canGet: true,
                    //获取验证码按钮文字内容
                    checkButtonContent: '获取验证码',
                    //验证码定时器
                    timer: null,
                    //倒计时
                    TimeCount: 60
                }
            }
        },
        methods: {
            //是否已经完整填写
            hasFullWrite(obj) {
                // 开始遍历
                for (let p in obj) { // 方法
                    if (typeof (obj [p]) == " function ") {
                        obj [p]();
                    } else { // p 为属性名称，obj[p]为对应属性的值
                        if (obj[p] === '') {
                            return false
                        }
                    }
                }
                return true
            },
            //获取验证码
            getCheckCode() {
                if (this.updateForm.email !== '') {
                    // 发起请求
                    getCheckCode(this.updateForm.email).then(res => {
                        // 如果验证码发送成功
                        if (res.data.code === 200) {
                            this.$message.success("验证码发送成功")
                            this.CodeCheck.canGet = false;
                            this.CodeCheck.TimeCount = 60;
                            this.loading()
                            this.timer = setInterval(() => {
                                this.loading()
                                if (this.CodeCheck.TimeCount === 0) {
                                    this.clearTimer();
                                }
                            }, 1000)
                        } else {
                            this.$message.error("验证码发送出错")
                        }
                    })
                } else {
                    this.$message.warning('您还未填写邮箱信息');
                }
            },
            loading() {
                this.CodeCheck.TimeCount--;
                this.CodeCheck.checkButtonContent = this.CodeCheck.TimeCount + "秒后可重新获取"
            },
            clearTimer() {
                this.CodeCheck.canGet = true;
                //清除定时器
                clearInterval(this.timer);
                this.timer = null;
                this.CodeCheck.checkButtonContent = "获取验证码";
            },
            //修改密码
            updatePassword() {
                if (this.hasFullWrite(this.updateForm)) {
                    updatePassword(this.updateForm).then(res => {
                        console.log(res)
                        if (res.data.code === 200) {
                            this.$message.success("修改成功")
                            setTimeout(() => {
                                this.$router.replace('/login')
                            }, 1000)
                        } else {
                            this.$message.error(res.data.data)
                        }
                    })
                } else {
                    this.$message.warning("请完整填写表单")
                }
            }

        }
    }
</script>

<style scoped>

    .wrap {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url("../assets/Forgot_password.png");
        background-size: 100% 120%;
    }

    .card {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        width: 350px;
        height: 600px;
        background-color: rgba(18, 25, 122, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-radius: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card input {
        width: 240px;
        height: 50px;
        border-top-width: 0px;
        border-left-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 1px;
        background-color: rgba(255, 255, 255, 0);
    }

    input:focus {
        outline: none;
        border-bottom: 1px solid rgba(7, 17, 80, 0.5);
        transition: 0.5s;
    }

    input::placeholder {
        font-size: 14px;
    }

    input:focus::placeholder {
        opacity: 0;
        transition: 0.5s;
    }

    .check {
        width: 244px;
        display: flex;
        justify-content: space-between;
        align-items: end;
        padding-bottom: 60px;
    }

    .check input {
        width: 110px;
        /*margin-right: 15px;*/
    }
</style>